{% extends "base.html" %}

{% block title %}选座购票 - {{ movie.title }}{% endblock %}

{% block head %}
<style>
    .seat-map {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .screen {
        background: linear-gradient(to bottom, #8e44ad, #3498db);
        height: 20px;
        margin-bottom: 30px;
        text-align: center;
        color: white;
        font-weight: bold;
        border-radius: 5px;
    }
    
    .seats-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .seat-row {
        display: flex;
        margin-bottom: 10px;
    }
    
    .seat {
        width: 30px;
        height: 30px;
        margin: 0 5px;
        background: #3498db;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .seat.selected {
        background: #e74c3c;
        transform: scale(1.1);
    }
    
    .seat.booked {
        background: #7f8c8d;
        cursor: not-allowed;
    }
    
    .seat:hover:not(.booked) {
        background: #2980b9;
        transform: scale(1.1);
    }
    
    .seat-info {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .seat-info-item {
        display: flex;
        align-items: center;
        margin: 0 15px;
    }
    
    .seat-info-color {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        margin-right: 5px;
    }
    
    .selected-seats {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    
    .seat-label {
        display: inline-block;
        background: #e74c3c;
        color: white;
        padding: 3px 8px;
        border-radius: 4px;
        margin: 0 5px 5px 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="card animate-fade">
    <div class="card-header">
        <h2 class="mb-0"><i class="bi bi-ticket-perforated me-2"></i>{{ movie.title }} - 选座购票</h2>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="seat-map">
                    <div class="screen">银幕</div>
                    <div class="seats-container">
                        {% for row in range(rows) %}
                        <div class="seat-row">
                            <div class="row-label">{{ row_letters[row] }}</div>
                            {% for col in range(cols) %}
                            {% set seat = row_letters[row] ~ (col+1) %}
                            <div class="seat 
                                {% if seat in booked_seats %}booked{% endif %}" 
                                data-seat="{{ seat }}">
                                {{ col+1 }}
                            </div>
                            {% endfor %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="seat-info">
                    <div class="seat-info-item">
                        <div class="seat-info-color" style="background: #3498db;"></div>
                        <span>可选座位</span>
                    </div>
                    <div class="seat-info-item">
                        <div class="seat-info-color" style="background: #e74c3c;"></div>
                        <span>已选座位</span>
                    </div>
                    <div class="seat-info-item">
                        <div class="seat-info-color" style="background: #7f8c8d;"></div>
                        <span>已售座位</span>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">订单信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <h5>{{ movie.title }}</h5>
                            <p class="mb-1">{{ cinema.name }} - {{ show.hall }}</p>
                            <p class="text-muted mb-1">{{ show.start_time.strftime('%Y-%m-%d %H:%M') }}</p>
                        </div>
                        
                        <div class="selected-seats">
                            <h6>已选座位：</h6>
                            <div id="selected-seats-list">
                                <!-- 已选座位将在这里显示 -->
                            </div>
                        </div>
                        
                        <form method="POST">
                            {{ form.hidden_tag() }}
                             <h3>选择座位</h3>
                                <div id="seat-map"></div>
                            {{ form.seats(id="seats-input") }}
    
                            <h3>支付方式</h3>
                                {{ form.payment_method }}

                            <button type="submit">提交订单</button>
                            <input type="hidden" name="seats" id="seats-input">
                            
                            <div class="d-flex justify-content-between mb-3">
                                <span>座位数量：</span>
                                <span id="seat-count">0</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>单价：</span>
                                <span>{{ show.price }}元</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3">
                                <span>总价：</span>
                                <span id="total-price">0元</span>
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100 mt-3">
                                <i class="bi bi-credit-card me-2"></i>确认支付
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const seatsInput = document.getElementById('seats-input');
        const selectedSeatsList = document.getElementById('selected-seats-list');
        const seatCount = document.getElementById('seat-count');
        const totalPrice = document.getElementById('total-price');
        const pricePerSeat = parseFloat("{{ show.price }}");

        let selectedSeats = [];

        // 座位点击事件
        document.querySelectorAll('.seat:not(.booked)').forEach(function(seat) {
            seat.addEventListener('click', function() {
                const seatId = this.getAttribute('data-seat');

                if (this.classList.contains('selected')) {
                    // 如果已选中，则取消选择
                    this.classList.remove('selected');
                    selectedSeats = selectedSeats.filter(s => s !== seatId);
                } else {
                    // 如果未选中，则选中
                    this.classList.add('selected');
                    selectedSeats.push(seatId);
                }

                updateOrderSummary();
            });
        });

        // 更新订单摘要
        function updateOrderSummary() {
            seatsInput.value = selectedSeats.join(',');
            seatCount.textContent = selectedSeats.length;
            totalPrice.textContent = (selectedSeats.length * pricePerSeat).toFixed(2) + '元';

            // 更新已选座位显示
            selectedSeatsList.innerHTML = '';
            selectedSeats.forEach(function(seat) {
                const seatElement = document.createElement('span');
                seatElement.className = 'seat-label';
                seatElement.textContent = seat;
                selectedSeatsList.appendChild(seatElement);
            });
        }
    });
</script>
{% endblock %}